<template>
  <div class="over-template">
    <div class="title">{{ itemData.title }}</div>
    <div class="over-template-item"
         v-for="item in itemData.info">
      <div class="over-template-item-left">
        <div class="name">{{ item.name }}</div>
        <div class="text">
          <label class="label">{{ firstChineseKey(item) }}</label>
          <span class="value">{{
            addThousandsSeparator(item[firstChineseKey(item)])
          }}</span>
        </div>
      </div>
      <div class="over-template-item-right">
        <div class="details-item"
             v-for="(value, key) in filterOtherChineseKeys(item)"
             :key="key">
          <label class="label">{{ key }}</label>
          <span class="value">{{ addThousandsSeparator(value) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
const props = defineProps({
  itemData: {
    type: Object,
    required: true,
  },
});

const info = ref([]);

const firstChineseKey = (obj) => {
  for (let key in obj) {
    if (obj.hasOwnProperty(key) && /[\u4e00-\u9fa5]/.test(key)) {
      return key;
    }
  }
  return null;
};

const filterOtherChineseKeys = (obj) => {
  const firstKey = firstChineseKey(obj);
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => key !== "name" && key !== firstKey)
  );
};
watch(
  () => props.itemData,
  () => {
    // info.value = JSON.parse(props.itemData.info || [])
    // console.log("info.value",info.value)
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.over-template {
  padding: 0.2rem 0.16rem 0 0;
  .title {
    font-size: 0.18rem;
    color: #151a24;
  }

  .over-template-item {
    width: 5.64rem;
    // min-width: 3.84rem;
    height: 0.36;
    margin-top: 0.08rem;
    padding: 0.12rem 0.16rem;
    // background: rgba(20, 112, 204, 0.1);
    background-image: linear-gradient(180deg, #f2f7ff 0%, #fdfeff 100%);
    border: 0.01rem solid rgb(10, 50, 104);
    display: flex;
    align-items: center;
    .over-template-item-left {
      width: 33%;
      // min-width: 20%;
      // max-width: 55%;
      margin-right: 0.1rem;
      .name {
        color: #1d2129;
        font-size: 0.16rem;
      }
      .text {
        margin-top: 0.04rem;
        display: flex;
        align-items: center;
        .label {
          color: #ffffffb3;
          font-size: 0.14rem;
        }
        .value {
          color: #ffffff;
          font-size: 0.18rem;
          margin-left: 0.04rem;
        }
      }
    }
    .over-template-item-right {
      flex: 1;
      display: flex;
      // justify-content: space-around;
      // flex-direction:row-reverse;
      // justify-content: end;
      .details-item {
        width: 1.22rem;
        // max-width: 1.5rem;
        display: flex;
        flex-direction: column;
        padding-right: 0 0.08rem;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .label {
          color: #86909c;
          font-size: 0.14rem;
        }
        .value {
          margin-top: 0.04rem;
          color: #1d2129;
          font-size: 0.14rem;
        }
      }
      .details-item:last-child {
        padding-right: 0;
      }
    }
  }
}
.over-template:nth-child(3n) {
  padding-right: 0;
}
</style>